<template>
  <div class="editInfo-container">
    <van-nav-bar :title="title" right-text="保存" left-arrow @click-left="$router.push('/info')" @click-right="onClickRight" />
    <!-- 头像 -->
    <div v-if="$route.query.type === 'avatar'" class="picture">
      <van-uploader ref="load" @delete="upload = true" :show-upload="upload" v-model="fileList" preview-size="200px" :after-read="afterRead" multiple />
    </div>

    <!-- 昵称 -->
    <van-cell-group v-if="$route.query.type === 'nickname'" class="group">
      <van-field class="nickname" v-model="nickname" placeholder="请输入用户名" />
    </van-cell-group>

    <!-- 个人简介 -->
    <van-cell-group class="group" v-if="$route.query.type === 'intro'">
      <van-field class="nickname" v-model="intro" placeholder="请输入个性签名" />
    </van-cell-group>

    <!-- 我的岗位 -->
    <van-cell-group class="group" v-if="$route.query.type === 'position'">
      <van-field class="nickname" v-model="position" placeholder="请输入个性签名" />
    </van-cell-group>
  </div>
</template>

<script>
import { editInfoAPI, uploadAPI } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  name: 'editInfo-container',
  data() {
    return {
      nickname: '',
      intro: '',
      fileList: [
        { url: '' },
        // Uploader 根据文件后缀来判断是否为图片文件
      ],
      upload: false,
      position: '',
      // 上传的头像id
      avatarId: 0
    }
  },
  async created() {
    // const res = await reqInfoAPI()
    // console.log(res)
    this.nickname = this.userInfo.nickname
    this.intro = this.userInfo.intro
    this.position = this.userInfo.position
    this.fileList = [{ url : 'http://hmmm.zllhyy.cn/' + this.userInfo.avatar || 'http://hmmm.zllhyy.cn/uploads/myphoto_f6d77c1cd8.png' }]
  },
  methods: {
    // 获得头像信息
    async afterRead(file) {
      this.upload = false
      // 此时可以自行将文件上传至服务器
      const files = new FormData()
      files.append('files', file.file)
      // console.log(file)
      const res = await uploadAPI(files)
      // console.log(res)
      this.avatarId = res.data[0].id
      // console.log(this.avatarId)
    },
    // 点击保存修改信息事件
    async onClickRight() {
      if (this.$route.query.type !== 'position') {
        if (this.$route.query.type === 'nickname') {
          await editInfoAPI({
            nickname: this.nickname
          })
          // console.log(res)
        } else if (this.$route.query.type === 'intro') {
          await editInfoAPI({
            intro: this.intro
          })
        } else {
          const res = await editInfoAPI({
            avatar: this.avatarId
          })
          this.upload = false
          console.log(res)
          this.fileList = [{url: 'http://hmmm.zllhyy.cn/' + res.data.avatar}]
        }
        this.$router.push('/info')
      } else {
        await editInfoAPI({
          position: this.position
        })
        this.$router.push('/mine')
      }
      // 新修改的值重新调用vuex保存，不然其他页面都还是旧的值
      this.$store.dispatch('user/getInfo')
      this.$toast.success('修改成功')
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    title() {
      if (this.$route.query.type === 'avatar') {
        return '修改头像'
      } else if (this.$route.query.type === 'nickname') {
        return '修改昵称'
      } else if (this.$route.query.type === 'position') {
        return '修改职位'
      } else {
        return '修改个性签名'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.picture {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.group {
  margin: 15px 20px;
  .nickname {
    background-color: #f7f4f5;
  }
}
</style>

